<template>
	<div class="detail" style="background: #F3F5F7;">
		<div @click="back" style="width: 15px;height: 15px;position: fixed;top: 10px;left:10px;">
			<img src="../../../resource/SVG/arrow_lift.svg" />
		</div>
		<div class="detail_wrapper">
			<div class="goods_context" style="background: #FFFFFF;">
				<div class="goods_image">
					<img :src="detailJson.image" style="width: 100%;max-height: 100%;" />
				</div>
				<div class="good_message" style="padding: 18px;">
					<h4 style="font-size: 14px;font-weight: 700;line-height: 14px;color: rgb(7,17,27);">{{detailJson.name}}</h4>
					<div class="good_month_condition" style="padding: 8px 0 18px;color: rgb(147,153,159);font-size: 10px;line-height: 10px;">
						<span>月销售{{detailJson.sellCount}}</span>
						<span>好评率{{detailJson.rating}}%</span>
					</div>
					<div class="goods_price" style="display: flex;justify-content: space-between">
						<div class="price" style="color: rgb(240,20,20);font-weight: 700;font-size: 16px;line-height: 16px;">
						￥{{detailJson.price}}
						<span class="old_price">{{detailJson.oldPrice}}</span>
						</div>
						<div class="sell">
							<span style="width: 74px;height: 24px;background: #00A0DC;color: #FFFFFF;padding:7px 6px;font-size: 12px;border-radius: 20px;">加入购物车</span>
						</div>
					</div>
				</div>
			</div>
			
			<div class="goods_intrduce" style="background: #fff;margin-top: 20px;padding: 18px;">
				<h4 style="font-size: 14px;font-weight: 700;line-height: 14px;color: rgb(7,17,27);padding-bottom: 8px;">商品介绍</h4>
				<p style="color: 77,85,93;font-size: 12px;font-weight: 200;line-height: 24px;">
				{{detailJson.info}}
				</p>
			</div>
			
			<div class="goods_ratings" style="background: #fff;margin-top: 20px;padding: 18px;">
				<h4 style="font-size: 14px;font-weight: 700;line-height: 14px;color: rgb(7,17,27);padding: 8px 0;">商品评价</h4>
				<div class="rating_content_list">
					<ul>
						<li v-for="rating in detailJson.ratings" style="border-bottom: 1px solid rgb(7, 17, 27, 0.1);padding: 15px 0;">
							<div style="display: flex;justify-content: space-between;">
								<div class="time" style="color: rgb(147,153,159);font-size: 10px;line-height: 24px;">
									2016-07-07  14:35
								</div>
								<div>
									<span style="color: rgb(7,17,27);font-size: 12px;line-height: 16px;vertical-align: top;">
										{{rating.username}}
									</span>
									<div class="user_avatar" style="display: inline-block;">
										<img :src="rating.avatar" style="width: 15px;height: 15px;border-radius: 50%;"/>
									</div>
								</div>
							</div>
							<p>
								{{rating.text}}
							</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				detailJson: ""
			}
		},
		created() {
			this.detailJson = this.$route.query
			console.log(this.detailJson)
		},
		methods: {
			back() {
				this.$router.replace("/goods")
			}
		}
	}
</script>

<style scoped="scoped">
	.detail {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: #fff;
	}
</style>